<template>
	<view class="header">提示: 请选择<text>新的座位</text>和新的读书<text>起始时间</text></view>
	<scroll-view scroll-x class="scroll1">
		<view :class="{'week':'week','changeWeek': v.changeFalse == true}" @click="changeWeek(v.id)" v-for="v in changeStyle" :key="v.id">{{v.week}}</view>
	</scroll-view>
	<view class="content">
		<view class="content-top">
			<view class="bgColor"></view><text>已满</text>
			<view class="bgColor"></view><text>空闲</text>
			<view class="bgColor"></view><text>已选</text>
		</view>
		<!-- 座位开始 -->
		<scroll-view class="scroll2 clearfix" scroll-x="true">
			<view v-if="seatActive==0">
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第二个 -->
			<view v-else-if="seatActive==1">
				<view>2</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第三个 -->
			<view v-else-if="seatActive==2">
				<view>3</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第四个 -->
			<view v-else-if="seatActive==3">
				<view>4</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第五个 -->
			<view v-else-if="seatActive==4">
				<view>5</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<view v-else-if="seatActive==5">
				<view>6</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">立即预约</view>
	</view>
</template>


<script>
	import {reactive, toRefs,onBeforeMount,onMounted,onUpdated} from 'vue'
	import {onReady,onLoad,onShow} from '@dcloudio/uni-app'
	export default {
		setup(){
			const data = reactive({
				// ---------------数据--------------------------
				//选择座位的样式的类名  类名用状态来添加   0 空闲  1 已选 2 已满
				colorArr:['#81D3F8','#D94154','#AAAAAA'],
				//点击改变 星期几的css样式
				changeStyle: [
					{ id:0, changeFalse: true, 	week:'周一(05.09)'},
					{ id:1, changeFalse: false, week:'周二(05.09)'},
					{ id:2, changeFalse: false, week:'周三(05.09)'},
					{ id:3, changeFalse: false, week:'周四(05.09)'},
					{ id:4, changeFalse: false, week:'周五(05.09)'},
					{ id:5, changeFalse: false, week:'周六(05.09)'}
				],
				col:[
					{	
						id:0,
						text:'1号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							{id:7,dataSon:'18:00-19:00',active : 0},
						],
					},
					{
						id:1,
						text:'2号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							{id:7,dataSon:'18:00-19:00',active : 0},
						],
					},
					{
						id:2,
						text:'3号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							{id:7,dataSon:'18:00-19:00',active : 0},
						],
					},
					{
						id:3,
						text:'4号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							{id:7,dataSon:'18:00-19:00',active : 0},
						],
					},
					{
						id:4,
						text:'5号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							{id:7,dataSon:'18:00-19:00',active : 0},
						],
					},
				],
				// 显示对应的 座位  利用状态判断 默认是 0
				seatActive: 0,
				// ---------------方法-------------------------
				changeWeek(id){
			// 1.我先判断changeFalse有没有true,有我就都先变为false
			// 2.再把id  为这个的变为changeFalse
			console.log(id)
					data.changeStyle.map((v)=> {
						v.changeFalse == true ? v.changeFalse = false : v.changeFalse
					})
					data.changeStyle[id].changeFalse = true
					data.seatActive = id
				},
				changeBg(i,j){
					// 1. 首先我应该是获取后台的数据,先渲染页面
					// 当我点击的时候,出现模态框,显示已经选择的座位,并且显示需要修改的位置
					// 
					// 我只能选择空闲的位置   如果是已满 我是不能选择的
					data.col[i].date[j].active == 0 ? data.col[i].date[j].active = 1 : data.col[i].date[j].active
				}
			})		
			return {...toRefs(data)}
		}
	}
</script>

<style lang="scss">
	// 清除浮动
	.clearfix::after {
		content: '';
		display: block;
		clear: both;
	}
	.header {
		font-size: 24rpx;
		text-align: center;
		margin: 20rpx 0;
		text {
			color: #81D3F8;
		}
	}
	
	.scroll1 {
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #ccc;
		white-space: nowrap;
	}
	
	.week {
		display: inline-block;
		width: 200rpx;
		height: 63rpx;
		text-align: center;
		line-height: 63rpx;
		margin-left: 20rpx ;
	}
	
	.changeWeek {
		color: #8080FF;
		border-bottom: 7rpx solid #8080FF;
	}
	
	.content {
		.content-top {
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 60rpx;
			line-height: 60rpx;
				.bgColor {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 4rpx;
					background-color: #AAAAAA;
				}
				text {
					font-size: 24rpx;
				}
				.bgColor:nth-of-type(2) {
					background-color: #81D3F8;
				}
				.bgColor:nth-of-type(3) {
					background-color: #D94154;
				}
		}
		.scroll2 {
			height: 920rpx;
			white-space: nowrap;
			.seatDate {
				display: inline-block;
				.seat-col {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 200rpx;
					height: 920rpx;
					font-size: 24rpx;
					view {
						width: 160rpx;
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
						color: white;
						background-color: #81D3F8;
					}
				}
				
			}
		}
	}
	.footer {
		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: white;
		text-align: center;
		background: linear-gradient(to right,#9392D5, #B4B3F9);
	}
	



</style>
